Element |
您所在的位置：网站首页 › elementui image查看大图层级最高 › Element |
Element
|
Element-ui中 使用图片查看器（el-image-viewer) 预览图片
原创
明天也要努力 2021-12-14 17:42:51 博主文章分类：HTML CSS UI ©著作权 文章标签 vue.js elementui 图片查看器 上下滚动 放大缩小 文章分类 后端开发 ©著作权归作者所有：来自51CTO博客作者明天也要努力的原创作品，请联系作者获取转载授权，否则将追究法律责任 1. 简介注意：本文 Element-ui 版本 2.11.1及以上 Element-ui 官方文档中有大图预览相关组件 传送门：Element-ui 图片组件，但我们不想通过使用 Image 组件的方式（先默认显示预览图片，再通过点击图片实现大图预览查看），又想实现直接预览大图的功能是否可行呢？答案是当然可以。 2. 图片查看器（el-image-viewer) 的使用翻看了 Image 的源码，发现实现大图预览的是一个小组件 image-viewer。 打开看看它的 props，如下： props: { urlList: { type: Array, default: () => [] }, zIndex: { type: Number, default: 2000 }, onSwitch: { type: Function, default: () => {} }, onClose: { type: Function, default: () => {} } }我们需要用到的就只有 urlList（存放图片链接）与 onClose（关闭查看器）两个属性。 在需要使用到的 vue 文件中引入组件components: { 'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')},在 template 中使用组件显示大图预览后发现鼠标上下滚动放大缩小图片时，遮罩后面的页面如果有滚动条，也会跟着滚动，体验感不好； 解决如下：可以写两个方法，在打开预览后调用下面方法禁止页面滚动，关闭预览后打开页面滚动。// 停止页面滚动stopMove () { const m = (e) => { e.preventDefault() }; document.body.style.overflow = 'hidden'; document.addEventListener("touchmove", m, false); // 禁止页面滑动},// 开启页面滚动move () { const m = (e) => { e.preventDefault() }; document.body.style.overflow = 'auto'; document.removeEventListener("touchmove", m, true);} 3. 完整代码 export default { data() { return { imgViewerVisible:false, imgList:[ 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg' ] }; }, components:{ 'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer') }, methods: { showImgViewer(){ this.imgViewerVisible = true; const m = (e) => { e.preventDefault() }; document.body.style.overflow = 'hidden'; document.addEventListener("touchmove", m, false); // 禁止页面滑动 }, closeImgViewer(){ this.imgViewerVisible = false; const m = (e) => { e.preventDefault() }; document.body.style.overflow = 'auto'; document.removeEventListener("touchmove", m, true); }, }};.content{ width: 100%; height: 1500px; background: pink;}效果：
上一篇：#私藏项目实操分享# Element-ui中 使用图片查看器（el-image-viewer) 预览图片 下一篇：解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation |
【本文地址】
今日新闻 |
推荐新闻 |